// 柱状图
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
// 1.把功能代码都放到这个组件中
// 2.将可控部分抽象成prop参数

const BarChart = ({ type }) => {
    const chartRef = useRef(null)
    // 保证dom可用 才进行图表的渲染
    useEffect(() => {
        // 1.获取渲染图表的dom节点
        const chartDom = chartRef.current

        // 2.图表初始化生成实例对象
        const myChart = echarts.init(chartDom);
        // 3.准备图表参数
        const option = {
            title: {
                text: type.title
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: type.xAxisData,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                max: type.yMax
            },
            series: [
                {
                    name: type.seriesName,
                    data: type.seriesData,
                    barWidth: '60%',
                    type: 'bar'
                }
            ],
        };

        // 4.使用图表参数完成图表的渲染
        option && myChart.setOption(option);
    }, [])
    return <div ref={chartRef} style={type.style}></div>
}

export default BarChart